<template>
	<view>
		<!-- 上部分 -->
		<view class="map_block">
			<view class="search_block" style="position: relative; z-index: 10;">
				<view class="search_img"></view>
				<input class="weui_input" placeholder="请输入目的地国家" v-model="searchKey" @input="useSearchKey" />
				<view style="position: absolute;top: 80%; width: 100%; background-color: #ffffff;">
					<view v-for="item in serchList" 
						:key="item.country"
						@click="getHotItem"
						style="background-color: #ffffff; padding-left: 20rpx;"
						:data-id="[ item.country, item.countryEn]">
						<text>{{ item.country }}</text>
					</view>
				</view>
			</view>
			<view class="map_list">
				<view :class="[ zhouId == item.id?'active '+item.key :item.key]" v-for="item in zhouArr" :key="item.id"
					@click="changeZhou" :data-id="item.id" :data-name="item.name" :data-key="item.key">{{item.name}}
				</view>
			</view>
		</view>
		<!-- 热门目的地 -->
		<view class="hot_block">
			<!-- 热门地 -->
			<view class="hot_city">
				<view class="title">
					<text class="title_tag">{{zhouName}}热门目的地</text>
				</view>
				<view class="hotList_block">
					<view v-for="item in hotList" :key="item.country_pic_url" class="hot_list">
						<view class="country" @click="getHotItem" :data-id="[ item.country, item.country_en]">
							<text>{{ item.country }}</text>
							<text class="country_en">{{ item.country_en }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 其他城市 -->
			<view class="other_city">
				<view class="title">
					<text class="title_tag">{{zhouName}}其他目的地</text>
					<text style="color: #868686;font-size: 28rpx;">拼音首字母排序</text>
				</view>
				<view class="cityList_block">
					<view v-for="item in cityList" :key="item.country" class="cityList" @click="getHotItem"
						:data-id="[ item.country, item.country_en]">
						<text>{{ item.country }}</text>
						<text style="margin-left: 30rpx;">{{ item.country_en }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//引入封装好的http
	import http from "@/utils/http.js";

	export default {
		data() {
			return {
				hotList: [],
				cityList: [],
				zhouArr: [{
						id: 1,
						name: "欧洲",
						key: "Europe"
					},
					{
						id: 2,
						name: "亚洲",
						key: "Asia"
					},
					{
						id: 3,
						name: "非洲",
						key: "Africa"
					},
					{
						id: 4,
						name: "大洋洲",
						key: "Oceania"
					},
					{
						id: 5,
						name: "南美洲",
						key: "SouthAmerica"
					},
					{
						id: 6,
						name: "北美洲",
						key: "NorthAmerica"
					},
				],
				zhouName: "欧洲",
				zhouKey: "Europe",
				zhouId: 1,
				zhouCity: [],
				searchKey: "",
				serchList: [],
			}
		},
		onLoad: function(options) {
			this.getZhouData();
		},
		methods: {
			useSearchKey() {
				if(this.searchKey && this.searchKey !== "") {
					http.request("product/desc/getCountriesByKeyWord/" + this.searchKey, "", "get").then(res => {
						this.serchList = res.data
					})
				}
			},
			getZhouData() {
				http.request("product/desc/CountryList/" + this.zhouName + "/" + this.zhouKey, "", "get").then(res => {
					// 热门目的地
					this.hotList = res.data.hot_country_list,
					 // 其他目的地
					this.cityList = res.data.other_country_list
				})
			},
			//切换洲
			changeZhou(ev) {
				this.zhouName = ev.currentTarget.dataset.name,
				this.zhouKey = ev.currentTarget.dataset.key,
				this.zhouId = ev.currentTarget.dataset.id,
				this.getZhouData();
			},
			getHotItem(ev) {
				console.log(ev);
				const countryKey = ev.currentTarget.dataset.id[0];
				const countryEnKey = ev.currentTarget.dataset.id[1];
				console.log(countryKey)
				console.log(countryEnKey)
				uni.navigateTo({
					url: "/pages/destination/details_item?id=" + countryKey + "&countryEnKey=" + countryEnKey
				})
			}
		}
	}
</script>

<style scoped>
	.map_block {
		width: 750rpx;
		height: 640rpx;
		background: #f2f2f2;
		padding-top: 45rpx;
		border-bottom: 8rpx dotted #bdc2c3;
		box-sizing: border-box;
	}

	.search_block {
		position: relative;
		height: 112.5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 76%;
		margin: auto;
	}

	.search_img {
		position: absolute;
		top: 22rpx;
		left: 20rpx;
		background-position: -131.25rpx -325.125rpx;
		display: inline-block;
		background-image: url("http://www.51houniao.com/wx/customer/classic/images/icon_list.png");
		background-repeat: no-repeat;
		width: 65.625rpx;
		height: 65.625rpx;
		background-size: 548.4375rpx;
		vertical-align: middle;
	}

	.weui_input {
		background-color: #fff;
		width: 100%;
		height: 64rpx;
		line-height: 70rpx;
		border-radius: 40rpx;
		padding-left: 100rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.hot_block {
		width: 750rpx;
		height: max-content;
		padding: 0 60rpx;
		box-sizing: border-box;
	}

	.hot_city {
		padding: 40rpx 0;
		box-sizing: border-box;
	}

	.title {
		padding-bottom: 24rpx;
		box-sizing: border-box;
	}

	.title_tag {
		font-size: 36rpx;
		color: red;
	}

	.hotList_block {
		width: 704rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.hot_list {
		position: relative;
		margin-bottom: 30rpx;
	}

	.hot_list {
		height: 40rpx;
		width: 325rpx;

	}

	.country {
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.country_en {
		font-size: 24rpx;
		margin-left: 12rpx;
	}
	
	.other_city {
		padding-bottom: 160rpx;
		box-sizing: border-box;
	}

	.other_city .title {
		display: flex;
		justify-content: space-between;
	}

	.other_city .cityList {
		height: 72rpx;
		display: flex;
		justify-content: space-between;
		line-height: 72rpx;
		color: #000;
		font-size: 28rpx;
	}

	.map_list {
		height: 421.88rpx;
		width: 684.38rpx;
		position: relative;
		margin: 23.438rpx 32.812rpx;
		font-size: 24rpx;
		color: #445356;
		/*background: lightblue;*/
	}

	.Europe {
		width: 375rpx;
		height: 200rpx;
		background: url("https://www.51houniao.com/wx/customer/classic/lib/images/ouzhou.png") center center no-repeat;
		background-size: 375rpx;
		background-position: 0 -213rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 6;
		text-align: center;
		line-height: 200rpx;
		/* padding-top: 80rpx; */
	}

	.Africa {
		position: absolute;
		left: -18.75rpx;
		top: 168.75rpx;
		width: 152.34rpx;
		height: 170rpx;
		background: url("https://www.51houniao.com/wx/customer/classic/lib/images/feizhou.png") center center no-repeat;
		background-size: 152.3438rpx;
		background-position: 0 -168.75rpx;
		z-index: 7;
		text-align: center;
		line-height: 120rpx;
	}

	.Asia {
		width: 168rpx;
		height: 117.38rpx;
		background: url("https://www.51houniao.com/wx/customer/classic/lib/images/yazhou.png") center center no-repeat;
		background-size: 187.5rpx;
		background-position: 0 -159.375rpx;
		position: absolute;
		z-index: 8;
		left: 121.875rpx;
		top: 121.875rpx;
		text-align: center;
		line-height: 117.38rpx;
	}

	.Oceania {
		width: 102.5rpx;
		height: 100rpx;
		background: url("https://www.51houniao.com/wx/customer/classic/lib/images/dayangzhou.png") center center no-repeat;
		background-size: 112.5rpx;
		background-position: 0 -103.125rpx;
		position: absolute;
		z-index: 11;
		left: 229.6875rpx;
		top: 285.9375rpx;
		line-height: 80rpx;
	}

	.SouthAmerica {
		width: 88.06rpx;
		height: 149.68rpx;
		background: url("https://www.51houniao.com/wx/customer/classic/lib/images/nanmei.png") center center no-repeat;
		background-size: 164.0625rpx;
		background-position: 0 -225rpx;
		position: absolute;
		z-index: 10;
		left: 482.8125rpx;
		top: 189.84375rpx;
		padding-top: 80rpx;
		padding-left: 76rpx;
	}

	.NorthAmerica {
		width: 300rpx;
		height: 240rpx;
		background: url("https://www.51houniao.com/wx/customer/classic/lib/images/beimei.png") center center no-repeat;
		background-size: 304.68rpx;
		background-position: 0 -243rpx;
		position: absolute;
		left: 375rpx;
		top: -23.4375rpx;
		z-index: 9;
		text-align: center;
		line-height: 410rpx;
	}

	.active {
		background-position: 0 0;
		color: #cbcaca;
	}
</style>

<style>
	page {
		height: 100%;
		width: 100%;
		background-color: #F2F2F2;
	}
</style>
